<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2864674_20l6daau3cc.css">
    <link rel="stylesheet" href="../css/xm.css">
    <link rel="stylesheet" href="../../node_modules/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="../css/xm-1.css">
    
</head>
<body>
    <div class="one">
        <div class="contain">
            <div class="left">
                <ul>
                    <li>小米商城
       
                        <span></span>
                    </li>
                    
                    <li>MIUI
                        <span></span>
                    </li>
                   
                    <li>loT
                        <span></span>
                    </li>
                   
                    <li>云服务
                        <span></span>
                    </li>
                   
                    <li>天星数科
                        <span></span>
                    </li>
                    
                    <li style="font-size:15px; "><a style="color: tomato; text-decoration: none;" href="./index.html">有品</a>
                        <span></span>
                    </li>
                    <li>小爱开放平台
                        <span></span>
                    </li>
                   
                    <li>企业团购
                        <span></span>
                    </li>
                    
                    <li>资质证照
                        <span></span>
                    </li>
                    
                    <li>协议规则
                        <span></span>
                    </li>
                    
                    <li>下载app
                        <span></span>
                    </li>
                    
                    <li>智能生活
                        <span></span>
                    </li>
                    
                    <li>SslectLocation</li>
                </ul>
            </div>
            <div class="right">
                <span class="iconfont icon-gouwuchekong">购物车(0)</span>
                
                <ul>
                    <li>登录</li>
                    <li>注册</li>
                    <li>消息通知</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 导航栏 -->
    <div class="two">
        <div class="contain2">
            <img src="https://s02.mifile.cn/assets/static/image/logo-mi2.png">
            <span class="iconfont icon-sousuo"></span>
            <input type="text" placeholder="充电宝">
            <ul>
                <li>Xiaomi手机</li>
                <li>Redmi红米</li>
                <li>电视</li>
                <li>笔记本</li>
                <li>平板</li>
                <li>家电</li>
                <li>路由器</li>
                <li>智能硬件</li>
                <li>服务</li>
                <li>社区</li>
            </ul>
        </div>
        <!-- 第三部分 -->
    </div>
    <div class="three">
        <div class="contain3">
            <!-- <div class="nav">
                <ul class="list">
                    <li>手机<span>></span></li>
                    <li>电视<span>></span></li>
                    <li>笔记本平板<span>></span></li>
                    <li>家电<span>></span></li>
                    <li>出行穿戴<span>></span></li>
                    <li>智能路由器<span>></span></li>
                    <li>电源配件<span>></span></li>
                    <li>健康儿童<span>></span></li>
                    <li>耳机音箱<span>></span></li>
                    <li>生活箱包<span>></span></li>
                </ul>
            </div> -->
            <div class="nav">
                <ul class="list">
                  <li>
                    <span>家用电器</span>
                    <i>&gt;</i>
                  </li>
                  <li>
                    <span>家用电器</span>
                    <i>&gt;</i>
                  </li>
                  <li>
                    <span>家用电器</span>
                    <i>&gt;</i>
                  </li>
                  <li>
                    <span>家用电器</span>
                    <i>&gt;</i>
                  </li>
                  <li>
                    <span>家用电器</span>
                    <i>&gt;</i>
                  </li><li>
                    <span>家用电器</span>
                    <i>&gt;</i>
                  </li><li>
                    <span>家用电器</span>
                    <i>&gt;</i>
                  </li><li>
                    <span>家用电器</span>
                    <i>&gt;</i>
                  </li><li>
                    <span>家用电器</span>
                    <i>&gt;</i>
                  </li><li>
                    <span>家用电器</span>
                    <i>&gt;</i>
                  </li>
                </ul>
                <div class="content">
                  <div class="left">
                    <ul class="tags">
                      <li>
                        <span>家电馆</span>
                        <i class="icon">&gt;</i>
                      </li>
                    </ul>
                    <ul class="cate_list">
                      <li>
                        <div class="name">
                          <span>分类名称</span>
                          <i>&gt;</i>
                        </div>
                        <ol>
                          <li>内容</li>
                        </ol>
                      </li>
                    </ul>
                  </div>
                  <div class="right">
                    <ul class="small_list">
                      <li>
                        <img src="" alt="">
                      </li>
                    </ul>
                    <ul class="big_list">
                      <li>
                        <img src="" alt="">
                      </li>
                    </ul>
                  </div>
                </div>
              </div>




            <div class="swiper-container swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/15c05b32cf948b594477dfc3eb69fb69.jpg?w=2452&h=920" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a532e33470d046b3f044d5ea49fc5e9e.png?thumb=1&w=1672&h=627&f=webp&q=90" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6c149e20d569b96c0a99f62e5108ad29.jpg?thumb=1&w=1672&h=627&f=webp&q=90" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/918820682e4a490221cfd92b24c14b86.jpg?thumb=1&w=1672&h=627&f=webp&q=90" alt="">
                    </div>
                </div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </div>
    <!-- 第四部分 -->
    <div class="four">
        <div class="contain4">
            <div class="c">
              
               <figure>
                   <span class="iconfont icon-shijian_o"></span>
                   <p>保障服务</p>
               </figure> 
               <figure>
                <span class="iconfont icon-shijian_o"></span>
                <p>保障服务</p>
            </figure>     
            <figure>
                <span class="iconfont icon-shijian_o"></span>
                <p>保障服务</p>
            </figure>     
            <figure>
                <span class="iconfont icon-shijian_o"></span>
                <p>保障服务</p>
            </figure>     
            <figure>
                <span class="iconfont icon-shijian_o"></span>
                <p>保障服务</p>
            </figure>     
            <figure>
                <span class="iconfont icon-shijian_o"></span>
                <p>保障服务</p>
            </figure>
            </div>
            <div class="d">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d8a6d6d37904e22c72130e3e4ec79b41.jpg?w=632&h=340">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fce474f4024b96545959ccd45b7e50f3.jpg?w=632&h=340">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/35b3f906861db9d6472206e6d68318d9.jpeg?w=632&h=340">
            </div>
        </div>
    </div>
    <div class="five">
        <div class="contain5">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f334fbd05d5681bb838fefd1c815d88c.jpg?thumb=1&w=1672&h=164&f=webp&q=90">
        </div>
    </div>
    <div class="six">
        <div class="contain6">
            <div class="sb">
            <p style="float: left; margin-top: 10px;">手机</p>
            <p style="width: 20px; height: 20px; margin-top: 10px; background: #b0b0b0; text-align: center; border-radius: 50%; float: right;">></p>
            <P style="float: right; margin-top: 10px;">查看更多</P>
            </div>
            <div class="wrap">
                <img src="">
            </div>
            <div class="sjyb">
            <figure>
                <img src="">
                <p class="hs">黑鲨4s</p>
                <p class="cd">磁动力升降肩键</p>
                <p class="yuan">2699元起</p>
            </figure>
            <figure>
                <img src="">
                <p class="hs">黑鲨4s</p>
                <p class="cd">磁动力升降肩键</p>
                <p class="yuan">2699元起</p>
            </figure>
            <figure>
                <img src="">
                <p class="hs">黑鲨4s</p>
                <p class="cd">磁动力升降肩键</p>
                <p class="yuan">2699元起</p>
            </figure>
            <figure>
                <img src="">
                <p class="hs">黑鲨4s</p>
                <p class="cd">磁动力升降肩键</p>
                <p class="yuan">2699元起</p>
            </figure>
            <figure>
                <img src="">
                <p class="hs">黑鲨4s</p>
                <p class="cd">磁动力升降肩键</p>
                <p class="yuan">2699元起</p>
            </figure>
            <figure>
                <img src="">
                <p class="hs">黑鲨4s</p>
                <p class="cd">磁动力升降肩键</p>
                <p class="yuan">2699元起</p>
            </figure>
            <figure>
                <img src="">
                <p class="hs">黑鲨4s</p>
                <p class="cd">磁动力升降肩键</p>
                <p class="yuan">2699元起</p>
            </figure>
            <figure>
                <img src="">
                <p class="hs">黑鲨4s</p>
                <p class="cd">磁动力升降肩键</p>
                <p class="yuan">2699元起</p>
            </figure>
            </div>
        </div>
       
    </div>
     <!-- 第七部分 -->
    <div class="seven">
        <div class="contain7">
            <div class="sb2">
                <p style="float: left; margin-top: 10px;">家电</p>
                
                <P style="float: right; margin-top: 10px;">电视影音</P>
                <p style="float: right; margin-top: 10px; margin-right: 10px;">热门</p>
                </div>
                <div class="wrap2">
                    <div class="ds">
                    <img src="">
                    </div>
                    <div class="ds2">
                    <img src="">
                    </div>
                </div>
                <div class="sjyb2">
                <figure>
                    <img src="">
                    <p class="hs2">黑鲨4s</p>
                    <p class="cd2">磁动力升降肩键</p>
                    <p class="yuan2">2699元起</p>
                </figure>
                <figure>
                    <img src="">
                    <p class="hs2">黑鲨4s</p>
                    <p class="cd2">磁动力升降肩键</p>
                    <p class="yuan2">2699元起</p>
                </figure>
                <figure>
                    <img src="">
                    <p class="hs2">黑鲨4s</p>
                    <p class="cd2">磁动力升降肩键</p>
                    <p class="yuan2">2699元起</p>
                </figure>
                <figure>
                    <img src="">
                    <p class="hs2">黑鲨4s</p>
                    <p class="cd2">磁动力升降肩键</p>
                    <p class="yuan2">2699元起</p>
                </figure>
                <figure>
                    <img src="">
                    <p class="hs2">黑鲨4s</p>
                    <p class="cd2">磁动力升降肩键</p>
                    <p class="yuan2">2699元起</p>
                </figure>
                <figure>
                    <img src="">
                    <p class="hs2">黑鲨4s</p>
                    <p class="cd2">磁动力升降肩键</p>
                    <p class="yuan2">2699元起</p>
                </figure>
                <figure>
                    <img src="">
                    <p class="hs2">黑鲨4s</p>
                    <p class="cd2">磁动力升降肩键</p>
                    <p class="yuan2">2699元起</p>
                </figure>
                <figure>
                    <img src="">
                    <p class="hs2">黑鲨4s</p>
                    <p class="cd2">磁动力升降肩键</p>
                    <p class="yuan2">2699元起</p>
                </figure>
        </div>
    </div>
    <!-- 最后三部分 -->
    <div class="eight">
        <div class="contain8">
            <div class="a8">
                <p style="float: left;">视频</p>
                <span>></span>
                <P style="float: right; margin-right: 10px;">查看更多</P>
            </div>
            <div class="a9">
                <figure>
                    <img src="">
                    <p>2021年春季新品发布会第一场</p>
                </figure>
                <figure>
                    <img src="">
                    <p>2021年春季新品发布会第一场</p>
                    
                </figure>
                <figure>
                    <img src="">
                    <p>2021年春季新品发布会第一场</p>
                </figure>
                <figure>
                    <img src="">
                    <p>2021年春季新品发布会第一场</p>
                </figure>
            </div>
        </div>
    </div>
    <!-- 9 -->
    <div class="nine">
        <div class="contain9">
            <ul>
                <li>
                    <img src="">
                    预约维修服务
                    
                </li>
                <li>
                    <img src="">
                    预约维修服务
                </li>
                <li>
                    <img src="">
                    预约维修服务
                </li>
                <li>
                    <img src="">
                    预约维修服务
                </li>
                <li>
                    <img src="">
                    预约维修服务
                </li>
            </ul>
        </div>
    </div>
    <!-- 100000000 -->
    <div class="ten">
        <div class="contain10">
            <div class="h7">
                <figure class="h8">
                    <ul>
                        <li>帮助中心</li>
                        <li>账户管理</li>
                        <li>购物指南</li>
                        
                        <li>订单操作</li>
                    </ul>
                </figure>
                <figure>
                    <ul>
                        <li class="h9">服务支持</li>
                        <li>售后政策</li>
                        <li>自助服务</li>
                        <li>相关下载</li>
                    </ul>
                </figure>
                <figure>
                    <ul>
                        <li class="h9">线下门店</li>
                        <li>小米之家</li>
                        <li>服务网点</li>
                        <li>授权体验店/专区</li>
                    </ul>
                </figure>
                <figure>
                    <ul>
                        <li class="h9">关于小米</li>
                        <li>了解小米</li>
                        <li>加入小米</li>
                        <li>投资者关系</li>
                        <li>企业社会责任</li>
                        <li>廉洁举报</li>
                    </ul>
                </figure>
                <figure>
                    <ul>
                        <li class="h9">关注我们</li>
                        <li>廉洁举报</li>
                        <li>新浪微博</li>
                        <li>官方微信</li>
                        <li>联系我们</li>
                        <li>公益基金会</li>
                    </ul>
                </figure>
                <figure>
                    <ul>
                        <li class="h9">特色服务</li>
                        <li>F码通道</li>
                        <li>礼物码</li>
                        <li>防伪查询</li>
                    </ul>
                </figure>
            </div>
            <div class="zh">
                <p style="color: #ff6900; font-size: 16px;">400-100-5678</p>
                <p style="font-size: 12px;">8:00-18:00(仅收市话费)</p>
                <p style="font-size: 12px;">人工服务</p>
                <p style="font-size: 12px;">关注小米</p>
            </div>
        </div>
    </div>
    <script src="../js/aaa.js"></script>
    <script src="../js/xm.js"></script> -->
    <script src="../../node_modules/swiper/swiper-bundle.min.js"></script>
    <script src="../js/jd_left_nav.js"></script>
    <script>
          
        var mySwiper = new Swiper ('.swiper', {
         
          loop: true, // 循环模式选项
          
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },
          
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          
          // 如果需要滚动条
          scrollbar: {
            el: '.swiper-scrollbar',
          },
        })        
        
        
        const listBox = document.querySelector('.nav > .list')
          const contentBox = document.querySelector('.nav > .content')
          // 渲染页面
          const s=list.slice(0,9)
          // console.log(s);
          bindHtml()
          function bindHtml() {
            // 利用 list 数组渲染页面
            let str = ''
            s.forEach(item => {
              str += `
                <li data-id="${ item.id }">
              `
              // item.name 是一个数组, 有多少项就有多少个 span
              item.name.forEach((t, i) => {
                str += `
                  <span>${ t.title }</span>
                  ${ i === item.name.length - 1 ? '' : '<i>/</i>' }
                `
              })
      
              str += `
                </li>
              `
            })
            listBox.innerHTML = str
          }
      
          // 绑定事件
          const lis = listBox.querySelectorAll('li')
          lis.forEach(function (item) {
            item.onmouseover = function () {
              // 从数组中找到对应的数据
              // 拿到自己身上自定义属性 id
              const id = item.dataset.id
              // 从数组中找到 id 对应的数据
              const data = list.find(item => item.id === id)
              bindRightHtml(data)
      
              // 使用 data 把右边的数据渲染完毕即可
              contentBox.classList.add('active')
            }
          })
      
          listBox.onmouseleave = function () {
            contentBox.classList.remove('active')
          }
      
          // 渲染右边的函数
          function bindRightHtml(data) {
      
            let str = `
              <div class="left">
                <ul class="tags">
            `
      
            data.tags.forEach(item => {
              str += `
                <li>
                  <span>${ item.title }</span>
                  <i class="icon">&gt;</i>
                </li>
              `
            })
      
            str += `
                </ul>
                <ul class="cate_list">
            `
      
            data.children.forEach(item => {
              str += `
                <li>
                  <div class="name">
                    <span>${ item.title }</span>
                    <i>&gt;</i>
                  </div>
                  <ol>
              `
      
              item.children.forEach(t => {
                str += `
                  <li>${ t.title }</li>
                `
              })
      
              str += `
                  </ol>
                </li>
              `
            })
      
            str += `
                </ul>
              </div>
            `
      
            contentBox.innerHTML = str
          }
        
          </script> 
  
</body>
</html>